<template>
  <div class="dashboard-container">
    <Card style="margin: 15px">
      <!-- 头部操作 -->
      <Row>
        <Col span="7">
          <Row :wrap="false" justify="space-around" type="flex">
            <Input v-model="params.username" placeholder="根据用户名搜索" />
            <Button style="margin: 0 10px 0 10px" @click="emptyBtn">清空</Button>
            <Button type="primary" @click="SearchBtn">搜索</Button>
          </Row>
        </Col>
        <Col span="17">
          <Row justify="end" type="flex">
            <Button type="success" @click="addUserBtn">新增用户</Button>
          </Row>
        </Col>
        <!-- 新增弹出层 -->
        <UserAdd :isIF.sync="sonIsIF" :userId="userId" :isShow.sync="isShow" :permissionInfo="permissionInfo" @userInfo="userInfoFn" :infoList="infoList" :titleName="titleName"></UserAdd>
      </Row>
      <Row>
        <Col span="24">
          <dataBar>
            <span slot="before">共{{counts}}条数据</span>
          </dataBar>
        </Col>
      </Row>
      <!-- 表格 -->
      <Table :columns="columns" :data="userList" align="center">
        <template slot-scope="{ row }" slot="name">
          <span>{{ row.name }}</span>
        </template>
        <template slot-scope="{ row }" slot="operation">
           <Button type="success" style="backgroundColor:#00CED1" shape="circle" class="button" @click="editorBtn(row)">
             <Icon type="ios-create" style="color:#fff;backgroundColor:#00CED1" :size="20" />
           </Button>
           <Button type="error" shape="circle" style="margin-left:10px;backgroundColor:#FF4500" class="button" @click="delBtn(row)">
             <Icon type="ios-trash-outline" style="color:#fff" :size="20"/>
           </Button>
        </template>
      </Table>
      <!-- 页码 -->
      <Row style="margin-top: 10px" type="flex" justify="center">
        <PageTool :params="params" :counts="counts" @pageChange="pageChange" @pagesizeChange="pagesizeChange"></PageTool>
      </Row>
    </Card>
  </div>
</template>

<script>
import { simple } from '@/api/base/permissions.js' // 新增弹出层-权限API
import { list, remove } from '@/api/base/users.js'// 用户列表API
/**
 * 组件
 */
import dataBar from '../components/dataBar.vue'
import PageTool from '../components/page-tool'
import UserAdd from '../components/user-add.vue'
export default {
  data () {
    return {
      sonIsIF: true,
      userId: '',
      infoList: {},
      titleName: '编辑用户',
      permissionInfo: '', // 权限列表信息
      isShow: false, // 新增弹出层开关
      userList: [], // 用户列表
      params: {
        page: 1,
        pagesize: 10,
        username: ''
      },
      keyword: '',
      counts: 0, // 用户总数据条数
      // 表头名称
      columns: [
        {
          title: '序号',
          type: 'index',
          align: 'center',
          maxWidth: 100
        },
        {
          title: '邮箱',
          key: 'email',
          align: 'center'
        },
        {
          title: '联系电话',
          key: 'phone',
          align: 'center'
        },
        {
          title: '用户名',
          key: 'username',
          align: 'center'
        },
        {
          title: '权限组名称',
          key: 'permission_group_title',
          align: 'center'
        },
        {
          title: '角色',
          key: 'role',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'operation',
          align: 'center'
        }
      ]
    }
  },
  components: {
    dataBar,
    PageTool,
    UserAdd
  },
  created () {
    this.list()
  },
  methods: {
    async list () {
      const { data } = await list(this.params)
      console.log(data)
      this.userList = data.list
      this.counts = data.counts
      // const res = data.list.find(item => item.id === 105)
    },
    // 获取权限列表
    async getSimple () {
      const { data } = await simple(this.keyword)
      // console.log(data)
      this.permissionInfo = data
    },
    // 添加成功后重新渲染
    userInfoFn () {
      this.list()
    },
    pageChange (pageNum, num) {
      this.params.page = pageNum
      this.list(this.params)
    },
    // 搜索按钮
    SearchBtn () {
      this.list()
    },
    // 清空按钮
    emptyBtn () {
      this.params.username = ''
      this.list()
    },
    // 删除用户按钮
    async delBtn (data) {
      this.$Modal.confirm({
        title: '提示',
        content: '您确定的永久性删除这条信息吗？',
        onOk: async () => {
          await remove(data)
          this.list()
          this.$Message.info('删除成功')
        },
        onCancel: () => {
          this.$Message.info('取消操作')
        }
      })
    },
    // 添加用户开关
    async addUserBtn () {
      this.infoList = {}
      this.titleName = '新增用户'
      this.getSimple()
      this.isShow = true
      this.sonIsIF = true
    },
    // 编辑按钮开关
    editorBtn (row) {
      this.userId = row.id
      this.getSimple()
      this.sonIsIF = false
      this.isShow = true

      this.infoList = row
    },
    pagesizeChange (pagesizeNum) {
      // console.log(pagesizeNum)
      this.params.pagesize = pagesizeNum
      this.list(this.params)
    }
  }
}
</script>

<style lang="scss" scoped>
.button {
  padding: 9px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>
